<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-07-23 10:20:07
 * @LastEditors: by
 * @LastEditTime: 2021-11-29 16:51:01
-->
<template>
    <div class="wrap">
        <div class="search_table">
            <div class="search_box">
                <div class="btn_box">
                    <el-button @click="onAdd" class="success-btn" icon="el-icon-plus" v-hasPermission="'zfrole:save'">新增</el-button>
                </div>
            </div>
            <div class="table_box">
                <el-table
                    v-loading="loading"
                    class="el_table"
                    :data="tableData"
                    empty-text="暂无数据"
                    :height="height"
                    :show-header="true"
                    :header-cell-style="{backgroundColor:'#EEF6FF',height:'48px'}"
                    :row-class-name="tableRowClass"
                >
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <el-table-column
                        v-for="(item, index) in tableTitle"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width ? item.width:''"
                        :formatter="item.formatter"
                    >
                    </el-table-column>
                    <el-table-column label="操作" width="220">   
                        <template v-slot="scope">
                            <el-button  icon="el-icon-edit" class="success-textbtn" type="text" size='medium'  v-hasPermission="'zfrole:update'" @click="onEdit(scope.$index, scope.row)" >编辑</el-button>
                            <el-button type="text"  class="danger-textbtn" icon="el-icon-delete" size='medium' v-hasPermission="'zfrole:delete'" @click="onDelete(scope.$index, scope.row)" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="el_footer"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.currPage"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="form.total">
                </el-pagination>
            </div>

        </div>
        
        <add @onChange="onChangeAdd" :type="type" :item="editItem" :visible="isAddShow"></add>
    </div>
</template>

<script>
import { formatTimestamp } from '@/utils/common'
import getTableHeight from '@/utils/mixins'
import add from './add.vue'
import userApi from '@/api/user'
export default {
    name: 'roleManage',
    mixins:[getTableHeight],
    components:{
        add,
    },
    data(){
        return {
            form:{
                currPage:1,
                pageSize:20,
                total: 0
            },
            // 表格
            loading: false,
            tableData:[
            ],
            tableTitle: [
                {
                    prop: 'name',
                    label: '角色'
                },
                {
                    prop: 'des',
                    label: '描述'
                }
            ],

            // 新增编辑
            isAddShow:false,
            editItem:{},
            type:'add',
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        getData(){
            this.loading = true
            userApi.getRoleList({
                current:this.form.currPage,
                pageSize:this.form.pageSize,
            }).then((res)=>{
                this.tableData = res.data.records
                this.form.total = res.data.total
                this.loading = false
            }).catch((err)=>{
                this.loading = false

            })
        },
        // 表格
        handleSizeChange(val) { // 分页
            this.form.pageSize = val
            this.form.currPage = 1
            this.getData()
        },
        handleCurrentChange(val) {
            this.form.currPage = val
            this.getData()
        },
        onAdd(){// 新增
            this.isAddShow = true
            this.type = 'add'
            this.editItem = {}
        },
        onEdit(index,item){// 编辑
            this.isAddShow = true
            this.type = 'edit'
            this.editItem = item
        },
        onChangeAdd(data){
            this.isAddShow = data.bool
            if(data.refresh){
                this.form.currPage = 1
                this.getData()
            }
        },
        //权限
        handleSet(id) {
            this.permissionDialogVisible = true
            this.id = id
        },
        // 删除
        onDelete(index,item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    userApi.roleDelete({
                        id:item.id
                    })
                    .then(() => {
                        this.$message.success('删除成功')
                        this.form.currPage = 1
                        this.getData()
                    })
                    .catch((err) => {
                        this.$message.success(err.message)  
                    })
                }).catch(() => {})
        },
    },
}
</script>
<style scoped lang="scss">
    .wrap{
        height: 100%;
    }
</style>